<template>
  <div class="interaction-container">
    <div class="setting-title">
      <span>特效判定器 </span>
      <el-button type="primary" @click="addSetting">添加</el-button>
    </div>
    <div
      v-if="settingRow || sceneStore.selLayer.effect.list.length > 0"
      class="setting-wrap"
      :class="!settingRow ? 'padding-bottom' : ''"
    >
      <div class="setting-item" v-for="(list, idx) in sceneStore.selLayer.effect.list" :key="idx">
        <div class="s-f-item">
          <div class="s-f-item-label">类型</div>
          <div class="s-f-item-content">
            <el-select
              popper-class="dark-select-popper"
              v-model="list.type"
              placeholder=""
              readonly
            >
              <el-option label="等于" value="1" />
              <el-option label="大于" value="2" />
              <el-option label="大于等于" value="3" />
              <el-option label="小于" value="4" />
              <el-option label="小于等于" value="5" />
            </el-select>
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">字段</div>
          <div class="s-f-item-content">
            <el-select popper-class="dark-select-popper" v-model="list.field" placeholder="">
              <el-option
                v-for="v in sceneStore.selLayer.effect.requestData"
                :key="v.label"
                :label="v.label"
                :value="v.label"
              />
            </el-select>
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">值</div>
          <div class="s-f-item-content">
            <el-input v-model="list.value" />
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">特效名称</div>
          <div class="s-f-item-content">
            <el-input v-model="list.name" />
          </div>
        </div>
        <div class="setting-operate">
          <el-button @click="removeSetting(list, idx)">删除</el-button>
        </div>
      </div>
      <div v-if="settingRow" class="setting-item setting-form">
        <div class="s-f-item">
          <div class="s-f-item-label">类型</div>
          <div class="s-f-item-content">
            <el-select popper-class="dark-select-popper" v-model="settingRow.type" placeholder="">
              <el-option label="等于" value="1" />
              <el-option label="大于" value="2" />
              <el-option label="大于等于" value="3" />
              <el-option label="小于" value="4" />
              <el-option label="小于等于" value="5" />
            </el-select>
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">字段</div>
          <div class="s-f-item-content">
            <el-select popper-class="dark-select-popper" v-model="settingRow.field" placeholder="">
              <el-option
                v-for="v in sceneStore.selLayer.effect.requestData"
                :key="v.label"
                :label="v.label"
                :value="v.label"
              />
            </el-select>
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">值</div>
          <div class="s-f-item-content">
            <el-input v-model="settingRow.value" />
          </div>
        </div>
        <div class="s-f-item">
          <div class="s-f-item-label">特效名称</div>
          <div class="s-f-item-content">
            <el-input v-model="settingRow.name" />
          </div>
        </div>
      </div>
      <div v-if="settingRow" class="setting-btn-wrap">
        <el-button @click="settingCancel">取消</el-button>
        <el-button type="primary" @click="saveSetting">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { addParticle } from '@/service/effect';
import { messageUtil } from '@jl/element-plus/utils';

defineOptions({
  name: 'LayerInteraction',
});

const sceneStore = useSceneStore();
const settingRow = ref<any>(null);

function addSetting() {
  settingRow.value = {
    name: '',
    field: '',
    value: '',
    type: '1',
  };
}

function settingCancel() {
  settingRow.value = null;
}

function saveSetting() {
  if (!settingRow.value.name || !settingRow.value.field || settingRow.value.value === '') {
    messageUtil.warning('字段请填写完整');
    return;
  }
  if (!sceneStore.selLayer) return;
  for (const v of sceneStore.selLayer.effect.list) {
    if (v.name === settingRow.value.name) {
      messageUtil.warning('特效名称重复，请修改');
      return;
    }
  }
  sceneStore.selLayer.effect.list.push(settingRow.value);
  if (sceneStore.selLayer.type === 'gltfmodel') {
    addParticle(
      settingRow.value,
      sceneStore.selLayer.effect.requestData,
      sceneStore.selLayer.layerName
    );
  }
  settingRow.value = null;
}

function removeSetting(list: any, idx: number) {
  const { cimInstance } = window;
  cimInstance.api.destroyCimParticle(list.name);
  sceneStore.selLayer.effect.list.splice(idx, 1);
}
</script>

<style lang="less" scoped>
.interaction-container {
  padding: 0 10px;
  .setting-title {
    display: flex;
    align-items: center;
    padding: 0 10px;

    .el-button {
      margin-left: auto;
    }
  }

  .setting-wrap {
    margin-top: 10px;
    background: #0a0b0d;
    border-radius: 8px;
    padding: 0 10px;

    &.padding-bottom {
      padding-bottom: 10px;
    }

    .setting-item {
      position: relative;
      .s-f-item {
        padding-top: 20px;

        &-label {
          width: 100%;
          // margin-top: 18px;
        }
        &-content {
          margin-top: 8px;

          .el-select {
            width: 100%;
          }
        }

        &.padding-bottom {
          padding-bottom: 10px;
        }
      }
      .setting-operate {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
        justify-content: center;
        align-items: center;
        background: fade(#000, 70%);
      }
      &:hover {
        .setting-operate {
          display: flex;
        }
      }
    }
  }
  .setting-btn-wrap {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
</style>
